<!--
* 播放器的媒体控制条基类
*@Author: bobo
*@Date: 2021-01-29
-->
<script>
export default {
  data() {
    return {
      //播放器[BaseFlvPlayer]组件实例
      player: null,
      //当前播放时长
      playTime: 0,
      //视频时长
      duration: null,
      //是否正在播放
      isPlaying: false,
      //是否显示控制条
      isShowControls: false,
      //是否全屏播放
      isFullScreen: false,
      progressBar: {
        //是否显示播放控制点
        isShowPointer: false,
        //当前播放进度[0-100]
        realPlayProgress: null,
        //重置的播放进度[0-100]
        resetPlayProgress: null,
        //用于展示的进度
        showPlayProgress: null,
        //播放控制点的宽度(px)
        pointerWidth: 0,
      },
    };
  },
  computed: {
    showProgressbarPointer() {
      if (this.progressBar.pointerWidth == 0) return true;
      return this.progressBar.isShowPointer;
    },
    showPlayTime() {
      if (this.progressBar.resetPlayProgress == null) {
        return this.playTime ? this.f_timeTranslate(this.playTime) : "00:00";
      } else {
        return this.f_timeTranslate(this._getResetPlayTime());
      }
    },
    showDuration() {
      return this.duration ? this.f_timeTranslate(this.duration) : "00:00";
    },
  },
  mounted() {
    if (this.$parent == undefined || this.$parent == null || "BaseFlvPlayer" != this.$parent.name) {
      throw "本组件是[BaseFlvPlayer]组件的插槽实现，请确认使用方式是否正确！！！";
    }
    this.player = this.$parent;
    //设置播放控制条的默认参数
    this.player.setControlsOptions({ height: 50, timeout: 4000 });
    const durationUnWatch = this.player.$watch("videoOptions.duration", (newVal) => {
      this.duration = newVal;
      durationUnWatch();
    });
    this.player.$watch("videoOptions.playProgress", (newVal) => {
      this.progressBar.realPlayProgress = newVal;
      this.progressBar.showPlayProgress = this._getShowProgress();
    });
    this.player.$watch("videoOptions.isPlaying", (newVal) => {
      this.isPlaying = newVal;
    });
    this.player.$watch("videoOptions.isShowControls", (newVal) => {
      this.isShowControls = newVal;
    });

    this.player.$watch("videoOptions.isFullScreen", (newVal) => {
      this.isFullScreen = newVal;
    });
    this.player.$watch("videoOptions.playTime", (newVal) => {
      this.playTime = newVal;
    });
  },
  methods: {
    f_play() {
      this.player.play();
    },
    f_pause() {
      this.player.pause();
    },
    f_fullScreen() {
      this.player.fullScreen();
    },
    f_exitFullScreen() {
      this.player.exitFullScreen();
    },
    f_reloadPlay() {
      this.player.reloadPlay();
    },
    /**
     * 将时间(秒)转换为00:00格式
     */
    f_timeTranslate(t) {
      let m = Math.floor(t / 60);
      m < 10 && (m = "0" + m);
      return m + ":" + ((t % 60) / 100).toFixed(2).slice(-2);
    },
    /**
     *@param progress 当前进度[0-100]
     * @param pointerEl 进度条上的指示点标识元素对象
     * @param progressbarEl 进度条上进度更新元素的对象
     * @param progressbarWidth 进度条总长度(px)
     */
    f_updateProgressbarUi(progress, pointerEl, progressbarEl, progressbarWidth) {
      //更新进度条ui
      progressbarEl.style.width = progress + "%";
      if (this.progressBar.pointerWidth == 0) {
        this.progressBar.pointerWidth = pointerEl.offsetWidth;
      }
      //播放进度指示点的适配权重(为了居中显示)
      let playPointJustWeight = (100 * this.progressBar.pointerWidth) / progressbarWidth / 2;
      //更新指示点的ui位置
      const pointerInProgressbarPercentage = progress - playPointJustWeight;
      if (pointerInProgressbarPercentage <= 0) {
        this.playPointEl.style.left = -this.progressBar.pointerWidth / 2 + "px";
      } else {
        this.playPointEl.style.left = pointerInProgressbarPercentage + "%";
      }
    },
    /**
     * 拖动进度条控制
     * @param pointerEl 进度条上的指示点标识元素对象
     * @param progressbarEl 进度条上进度更新元素的对象
     * @param containerEl 进度条容器元素对象
     */
    f_initProgressbarControl(pointerEl, progressbarEl, containerEl) {
      if (pointerEl && progressbarEl && containerEl) {
        containerEl.onmousedown = (e) => {
          this._dragProgressbar(e, pointerEl, progressbarEl, containerEl);
        };
        containerEl.onmouseover = () => {
          this.progressBar.isShowPointer = true;
        };
        containerEl.onmouseleave = () => {
          this.progressBar.isShowPointer = false;
        };
      } else {
        throw "对象存在未定义或空值，进度条控制初始化失败";
      }
    },
    //---------------------------------内部私有方法----------------------------------------------
    /**
     * 拖动进度条
     * @param downEvent 鼠标按下事件
     * @param pointerEl 进度条上的指示点标识元素对象
     * @param progressbarEl 进度条上进度更新元素的对象
     * @param containerEl 进度条容器元素对象
     */
    _dragProgressbar(downEvent, pointerEl, progressbarEl, containerEl) {
      this.player.enableDragWindow(false);
      const abort = this._handleProgressbarEvent(downEvent, pointerEl, progressbarEl, containerEl);
      if (abort) {
        return;
      }
      //处理拖动功能
      if (containerEl.setCapture) {
        containerEl.setCapture();
      }
      //注册全局移动事件
      document.onmousemove = (e) => {
        // 取消事件的默认动作。
        e.preventDefault();
        this._handleProgressbarEvent(e, pointerEl, progressbarEl, containerEl);
      };
      document.onmouseup = () => {
        if (containerEl.releaseCapture) {
          containerEl.releaseCapture();
        }
        document.onmouseup = document.onmousemove = null;
        this.player.enableDragWindow(true);
        this.player.seekTo(this._getResetPlayTime());
        //延时清除，解决因重置，造成时间显示抖动现象
        setTimeout(() => {
          this.progressBar.resetPlayProgress = null;
        }, 300);
      };
    },
    _getShowProgress() {
      return this.progressBar.resetPlayProgress != null
        ? this.progressBar.resetPlayProgress
        : this.progressBar.realPlayProgress;
    },
    _getResetPlayTime() {
      return (this.duration * this.progressBar.resetPlayProgress) / 100;
    },
    _handleProgressbarEvent(e, pointerEl, progressbarEl, containerEl) {
      if (this.duration == null || this.duration == 0) {
        console.log("直播-不支持拖动进度条");
        return false;
      }
      const containerRect = containerEl.getBoundingClientRect();
      if (e.clientX < containerRect.left || e.clientX > containerRect.right) {
        //点击超出进度条范围，直接忽略
        return true;
      }
      const distance = e.clientX - containerRect.left;
      const dragProgress = Math.floor((distance * 100) / containerRect.width);
      if (dragProgress != this.progressBar.resetPlayProgress) {
        //更新重置进度
        this.progressBar.resetPlayProgress = dragProgress;
      } else {
        return false;
      }
      const progress = this._getShowProgress();
      this.f_updateProgressbarUi(progress, pointerEl, progressbarEl, containerRect.width);
      return false;
    },
  },
};
</script>